/**
 * Created by Luo on 2017-10-31.
 */
$(document).ready(function(){
    var tablejquery = '#tab'    //<table>的id设置,方便重用

    //设置所有的<tr/>居中
    $(tablejquery+" tr").attr("align","center");

    //模板
    newtrtemp = function(index,refIndex) {
        var nextTxtVal = '';
        var nextDefaultVal = '';//默认值

        var tr =  ""
            +"    <tr id="+index+" align='center'>"
            +"        <td><input type='checkbox' id='delck_"+index+"' /></td>"
            +"        <td nowrap='nowrap'><div class='countnum' style='position:relative'>"+index+"<div class='newdot' id='new_"+index+"' style='color:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px;'>new</div></div></td>"
            +"        <td><select name='cagetary"+index+"' id='cagetary"+index+"'>" +
                "<OPTION selected value='差旅费'>差旅费</OPTION>" +
                "<OPTION value='办公费'>办公费</OPTION>" +
                "<OPTION value='租赁场地费'>租赁场地费</OPTION>" +
                "<OPTION value='其他物品租赁费'>其他物品租赁费</OPTION>" +
                "<OPTION value='临时人工费'>临时人工费</OPTION>" +
                "<OPTION value='制作类'>制作类</OPTION>" +
                "<OPTION value='展台搭建'>展台搭建</OPTION>" +
                "<OPTION value='摄影摄像'>摄影摄像</OPTION>" +
                "<OPTION value='押金'>押金</OPTION>" +
                "<OPTION value='版权'>版权</OPTION>" +
                "<OPTION value='快递'>快递</OPTION>" +
                "<OPTION value='其他'>其他</OPTION>" +
                "</select></td>"
            +"        <td><input type='text' name='money"+index+"' value='"+nextDefaultVal+"' id='money"+index+"' size='10'/><span style='color:#CCCCCC;font-weight:normal'></span></td>"
            +"        <td><input type='text' name='info"+index+"' value='"+nextTxtVal+"' id='info"+index+"'/></td>"
            +"        <td nowrap='nowrap'><a href=\'#\' onclick=\'deltr("+index+")\'>删除</a>&nbsp;</td>"
            +"    </tr>";
        return tr;
    }


    //此行用于模拟服务器提交获取的数据
    if(window.location.search!="") {$('#submitform').append('<p>服务器接收到的表单信息为:<br/>'+window.location.search+"</p>");}


    //表单提交时的事件
    $("#submitbtn").click(function(){
        $("#submitform").append('<br/>输入的行数为:'+$("#inputlen").val()+",即inputLen="+$("#inputlen").val()+"<br/>您可以在服务器端通过循环由1到inputLen获取表单数据,比如inputFtitle[inputLen]即为第inputLen个标题输入项&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick='document.getElementById(\"submitform\").submit();'>查看提交的表单数据</a>");
        return false;
    });


    //全选反选处理
    var allchecked = false;
    $("#delckall").click(function(){
        allchecked = !allchecked;
        for(var i=$("#inputlen").val()-0 ;i>=1; i--) {
            $("#delck_"+i)[0].checked = (!allchecked) ? false : 'checked';

        }
    });

    //批量删除处理
    $("#delbtn").click(function(){
        for(var i=$(tablejquery+" tr").length-1 ;i>=1; i--) {
            if($("#delck_"+i)[0].checked) {
                var delsometr = function(index) {
                    deltr(index);
                }

                delsometr(i);    //删除单行
            }
        }
        return false;
    });





    //用于限制向上向下时的超界问题
    var moveupHTML = "<a href=\'#\' onclick=\'moveup($k$)\' id='moveup_$k$'>向上</a>"
    var movedownHTML = "<a id='movedown_$k$' href=\'#\' onclick=\'moveup($k+1$)\'>向下</a>"
    //设置链接无效,供添加删除等调用
    disableHref = function() {
        var trlen = $(tablejquery+' tr').length;
        $(tablejquery+' tr').each(function(k,v) {
            //将所有的样式及限制还原
            if(k>0 && k< trlen) {
                $('#moveup_'+k).replaceWith(moveupHTML.replace("$k$",k).replace("$k$",k));
                $('#movedown_'+k).replaceWith(movedownHTML.replace("$k$",k).replace("$k+1$",(k+1)));
            }

            //单独设置限定项
            if(k==1){
                $('#moveup_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='moveup_"+k+"'>向上</span>");
            }

            if(k+1==trlen) {
                $('#movedown_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='movedown_"+k+"'>向下</span>");
            }
        });
    }


    //在尾部新增加一项<tr/>
    $("#but").click(function(){
        //隐藏new效果
        $('.newdot').hide();
        var _len = $(tablejquery+" tr").length;
        $(tablejquery).append(newtrtemp(_len));

        //设置新增项有new效果
        $('#new_'+_len).show();

        //设置服务器的获取长度
        $('#inputlen').val($(tablejquery+" tr").length-1);
        //向上及向下的界限处理
        disableHref();

        return false;
    })


    // 将第i行的内容设置到第j行.即tr(id=i).replaceWith(tr(id=j))
    var MoveTr = function(fromIndex,toIndex,keep) {
        var i = fromIndex;
        var j = toIndex;
        var k = keep //是否保留原先的tr,如果keep=false,则原tr被替换没掉了



        //将当前项(包括表单项值等)设置到第j项项
        $("tr[id=\'"+(k? j : i)+"\']")
            .replaceWith(newtrtemp(j,i));

    }



    //删除指定索引的<tr/>项
    deltr =function(index)
    {
        var _len = $(tablejquery+" tr").length;

        //删除当前行
        $("tr[id='"+index+"']").remove();

        //new效果检测
        var hasnewdotID = 0

        //当前删除项的后面部分执行向上替换
        for(var i = index+1,j=_len;i<j;i++){
            //用于检索并获取之前的new效果项

            if(hasnewdotID==0) {
                hasnewdotID = $('#new_'+i)[0].style.display != 'none' ? i : 0;
            }

            //将当前行设置到上一行(当前行不保留)
            MoveTr(i,i-1);

        }



        //如果检索到哪个new效果项,设置到新的项去(新项为减1)
        if(hasnewdotID != 0) {
            $('#new_'+(hasnewdotID-1)).show();
        }

        //设置服务器的获取长度
        $('#inputlen').val($(tablejquery+" tr").length-1);
        //向上及向下的界限处理
        disableHref();

        return false;
    }


    //向上移动或向下移动
    moveup = function(index) {

        var _len = $(tablejquery+" tr").length;

        //有disableHref();  向上及向下的界限处理后,此下两行可注释,否则开启
        //if(index==1) {alert('第一条无法向上');return false;}
        //if(index==_len)  {alert('最后条无法向下');return false;}


        //新增一行
        $(tablejquery).append("<tr id='"+_len+"' align='center'><td colspan='9'></td></tr>");


        //检索之前的new效果
        var hasnewdotID = 0
        hasnewdotID = $('#new_'+index)[0].style.display != 'none' ? index : 0;
        if(hasnewdotID==0) {
            hasnewdotID = $('#new_'+(index-1))[0].style.display != 'none' ? (index-1) : 0;
        }

        //将当前行的内容设置到新增行,保留当前行
        MoveTr(index,_len,true);

        //将上行的内容设置到当前行,保留上行
        MoveTr(index-1,index,true);

        //将新增行内容设置到上行内容
        MoveTr(_len,index-1,true);



        //删除新增行
        var tr=$("tr[id=\'"+_len+"\']")[0];
        var table=tr.parentNode;
        table.removeChild(tr);

        //如果检索到哪个new效果项,设置到新的项去
        if(hasnewdotID!=0) {
            if(hasnewdotID == index) {
                $('#new_'+(hasnewdotID-1)).show();
            }else{
                $('#new_'+index).show();
            }
        }

        //设置服务器的获取长度
        $('#inputlen').val($(tablejquery+" tr").length-1);
        //向上及向下的界限处理
        disableHref();

        return false;
    }

    //下增一行<tr/> 或上增一行
    addnexttr =function(index)
    {
        var _len = $(tablejquery+" tr").length;
        $('.newdot').hide();

        //新增一行
        $(tablejquery).append(newtrtemp(_len));

        //循环:从当前索引的 [下行的下行]到 [新增的项],行内容从循环当前项的"上行"获得
        for(var i=_len,j=index+2; i>=j;i--)
        {
            //将上行的内容设置到当前行并保留上行
            MoveTr(i-1,i,true);
        }

        //还原新增行
        $("tr[id=\'"+(index+1)+"\']").replaceWith(newtrtemp(index + 1))

        //新增行new效果
        $('#new_'+(index + 1)).show();

        //设置服务器的获取长度
        $('#inputlen').val($(tablejquery+" tr").length-1);
        //向上及向下的界限处理
        disableHref();

        return false;
    }
})